<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.13/vue.min.js"></script>
  </head>
  <style>
    .in {
      width: 50px;
      /* height: 48px; */
      background-color: #000;
      margin: 0;
      font-size: 0;
      /* border: 1px solid #000; */
      color: #fff;
    }
    .out {
      display: flex;
      flex-wrap: wrap;
      width: 1000px;
      height: 500px;
      background-color: #000;
      overflow: auto;
    }
    #app {
      position: relative;
    }
    .snack {
      position: absolute;
    }
    .snack div {
      width: 50px;
      height: 50px;
      background-color: blanchedalmond;
    }
  </style>
  <body>
    <div id="app">
      <!-- <div class="snack">
        <div class="snack-son" v-for="(item,index) in snackArr" :key="index"></div>
      </div> -->
      <input type="text" @keyup="changeMoveWay" ref="toolInput" @blur="focus" />
      <div class="out">
        <div
          class="in"
          :style="{backgroundColor:snackBody.includes(index)?'#000':foodBody===index?'red':'#fff'}"
          v-for="(item,index) in arr"
          :key="index"
        ></div>
      </div>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data() {
          return {
            message: 'Hello Vue!',
            arr: [],
            snackArr: [0],
            showDom: true,
            moveWay: 'right',
            snackSonBody: ['1,1'],
            foodDot: '',
            timer: null
          }
        },
        mounted() {
          const a = []
          a.length = 200
          a.fill('1')
          this.arr = a
          this.initMove()
          this.randomShowFood()
          this.$refs.toolInput.focus()
        },
        computed: {
          snackBody() {
            return this.snackSonBody.map(item => {
              const itemArr = item.split(',')
              const rownum = itemArr[0] - 1
              const columnnum = itemArr[1] - 1
              const currentnum = columnnum * 20 + rownum * 1
              console.log(currentnum)

              return currentnum
            })
          },
          foodBody() {
            const itemArr = this.foodDot.split(',')
            const rownum = itemArr[0] - 1
            const columnnum = itemArr[1] - 1
            const currentnum = columnnum * 20 + rownum * 1
            return currentnum
          }
        },
        methods: {
          focus() {
            this.$refs.toolInput.focus()
          },
          clear() {
            this.snackSonBody = ['1,1']
            this.moveWay = 'right'
          },
          initMove() {
            this.timer = setInterval(() => {
              this.move(false)
            }, 300)
          },
          randomShowFood() {
            const row = Math.ceil(Math.random() * 20)
            const column = Math.ceil(Math.random() * 10)
            if (this.snackBody.find(item => item === `${row},${column}`)) {
              this.randomShowFood()
            }
            this.foodDot = `${row},${column}`
            console.log(this.foodDot)
          },
          changeMoveWay(e) {
            switch (e.keyCode) {
              case 39:
                this.moveWay !== 'right' && this.moveWay !== 'left' && (this.moveWay = 'right')
                break
              case 40:
                this.moveWay !== 'down' && this.moveWay !== 'up' && (this.moveWay = 'down')
                break
              case 37:
                this.moveWay !== 'left' && this.moveWay !== 'right' && (this.moveWay = 'left')
                break
              case 38:
                this.moveWay !== 'down' && this.moveWay !== 'up' && (this.moveWay = 'up')
                break
              default:
                return
            }
          },
          fail() {
            this.clear()
            this.timer && clearInterval(this.timer)
            alert('失败')
          },
          move() {
            const first = this.snackSonBody[this.snackSonBody.length - 1]

            const firstBody = first.split(',')
            let moveDot = ''
            switch (this.moveWay) {
              case 'down':
                moveDot = `${firstBody[0] * 1},${firstBody[1] * 1 + 1}`
                break
              case 'up':
                moveDot = `${firstBody[0] * 1},${firstBody[1] * 1 - 1}`
                break
              case 'left':
                moveDot = `${firstBody[0] * 1 - 1},${firstBody[1] * 1}`
                break
              case 'right':
                moveDot = `${firstBody[0] * 1 + 1},${firstBody[1] * 1}`
                break
            }
            if (moveDot.split(',').some(item => item * 1 < 1 || item * 1 > 20)) {
              this.fail()
              return
            }
            if (this.snackSonBody.includes(moveDot)) {
              this.fail()
              return
            }
            this.snackSonBody.push(moveDot)
            if (moveDot !== this.foodDot) {
              this.snackSonBody.shift()
            } else {
              this.randomShowFood()
            }
          }
        }
      })
    </script>
  </body>
</html>
